रिएक्ट पोर्टल के साथ कहीं भी अपने घटकों को कैसे परिवहन करें

जब हम रिएक्ट में कंपोनेंट्स बनाते हैं, तो आम तौर पर वे कंपोनेंट ट्री के भीतर मौजूद होते हैं। यह ज्यादातर ठीक है, लेकिन कभी-कभी हम चाहते हैं कि किसी घटक के कुछ हिस्से घटक पेड़ के बाहर दिखाई दें, या कहीं पूरी तरह से अलग हों।

यह एक सामान्य आवश्यकता है जब हम मोडल पॉपअप विंडो बनाते हैं, जिसे अन्य सभी घटकों से ऊपर होना चाहिए।

हम इन्हें एक घटक के भीतर बना सकते हैं, लेकिन अंततः हम उन्हें बाकी सब से ऊपर चाहते हैं, और उन्हें कई घटकों के भीतर नेस्ट करने से समस्याएँ हो सकती हैं क्योंकि उनका z-index जो कुछ भी भीतर है उससे नीचे गिर जाएगा:

इस समस्या को हल करने के लिए, हम createPortal का उपयोग करके अपने स्वयं के घटक से और अपने टेम्पलेट के दूसरे भाग में मोडल को टेलीपोर्ट कर सकते हैं।

यह हमें हमारे घटक को कहीं भी रखने की अनुमति देता है, जैसे कि HTML ट्री का आधार, body टैग के अंदर, या किसी अन्य तत्व के अंदर।

भले ही तत्व घटक ट्री के भीतर मौजूद हो, createPortal हमें इसे अपनी पसंद के अनुसार कहीं भी रखने की शक्ति देता है।

प्रतिक्रिया पोर्टल का उपयोग करना

आपको यह दिखाने के लिए कि पोर्टल कैसे काम करते हैं, विचार करें कि हमारे पास हमारी App.js फ़ाइल के अंदर निम्नलिखित मूल प्रतिक्रिया कोड है। यहां, हम चाहते हैं कि मोडल बाकी सब चीजों के ऊपर दिखाई दे। जैसे, हमने #modal-container नामक एक div बनाया है। यह अंततः वह जगह है जहाँ हम चाहते हैं कि हमारे सभी मोडल इसमें जाएँ:

 import logo from './logo.svg'; import './App.css'; import { useState } from 'react' import Modal from './components/Modal.js'; function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> </div> ); } export default App;

App.js के अंदर, मैंने Modal नामक एक घटक आयात किया है। यह हमारा मॉडल घटक है, जो उपयोगकर्ता द्वारा बटन पर क्लिक करने पर किसी भी समय पॉप अप हो जाएगा।

जब भी isModalOpen को setIsModalOpen() का उपयोग करके सही पर सेट किया जाता है, तो मोडल दिखाई देना चाहिए। नहीं तो गायब हो जाएगा।

मेरे पास यह सुनिश्चित करने के लिए कुछ सीएसएस भी है कि हमारे मॉडल वास्तव में बाकी सब चीजों के शीर्ष पर दिखाई दें:

 #modal-container { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; height: 100%; pointer-events: none; } .modal { position: absolute; top: 200px; background: white; border-radius: 4px; left: calc(50% - 100px); width: 200px; }

हमारा बनाना {ortal

पोर्टल बनाना बहुत आसान है - एक फ़ंक्शन है, createPortal() । रिएक्ट में कुछ डोम वापस करने के बजाय, हम इसके बजाय Portal लौटाते हैं।

createPortal() दो तर्क स्वीकार करता है - DOM तत्व जिसे हम वापस करना चाहते हैं - इस मामले में, मोडल - और DOM तत्व जिसे हम अपने DOM तत्व को टेलीपोर्ट करना चाहते हैं।

तो, हमारा दूसरा तर्क है document.getElementById('modal-container') , क्योंकि हम अपने सभी मॉडलों को #modal-container में रखना चाहते हैं:

 import { createPortal } from 'react-dom'; function Modal({modalState, onClickEvent}) { if(!modalState) return null; return ( createPortal( <div className="modal"> <button onClick={onClickEvent}>Close Modal</button> <div className="modal-content">Modal Content goes here</div> </div>, document.getElementById('modal-container') ) ); }; export default Modal;

हालाँकि हमने अपने DOM तत्व को modal-container पर टेलीपोर्ट किया, फिर भी यह एक सामान्य प्रतिक्रिया बच्चे की तरह व्यवहार करता है। चूंकि पोर्टल अभी भी रिएक्ट ट्री में मौजूद है, इसलिए तत्व जिस संदर्भ में है, वह अभी भी वही काम करता है।

यह भी ध्यान दिया जाना चाहिए कि यद्यपि हमारे पास एक ही फ़ाइल में modal-container और Modal हैं, जिस स्थान पर आप अपने DOM तत्व को टेलीपोर्ट करते हैं वह आपके रिएक्ट कोड में कहीं भी हो सकता है।

तो, आप इसे डीओएम में कहीं भी एक पूरी तरह से अलग उप-घटक, तत्व या माता-पिता को टेलीपोर्ट कर सकते हैं। यह बहुत शक्तिशाली और उपयोगी है - इसलिए इसका बुद्धिमानी से उपयोग करें।

आइए हमारे App.js HTML को देखें:

 <!-- .... --> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div>

अब, भले ही Modal हमारे हेडर में बैठता है, यह #modal-container में दिखाई देगा जब भी हम बटन का उपयोग करके मोडल खोलेंगे:

निष्कर्ष

रिएक्ट में पोर्टल एक बहुत शक्तिशाली उपकरण है। वे घटक-आधारित प्रणालियों के साथ मुख्य मुद्दे को हल करने का एक उपयोगी तरीका हैं - कुछ तत्वों को बाकी सभी से ऊपर ले जाना।

इसलिए, मुझे आशा है कि आपने रिएक्ट पोर्टल्स के लिए इस गाइड का आनंद लिया होगा। यदि आप रिएक्ट सीख रहे हैं, तो मेरा सुझाव है कि पहले जावास्क्रिप्ट में महारत हासिल करें - जो आप मेरी पूरी जावास्क्रिप्ट हैंडबुक के साथ कर सकते हैं।

आपका दिन अच्छा रहे।